<template>
  <!-- 选择商品 -->
  <div>
    <div style="display: flex; justify-content: end; margin-bottom: 10px">
      <a-input-search
        allowClear
        v-model:value="pageSet.productName"
        placeholder="请输入产品名称"
        enter-button
        @search="loadPagination(true)"
        style="width: 300px"
      />
    </div>
    <a-table
      size="small"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      bordered
      :pagination="false"
      row-key="id"
      :preserveSelectedRowKeys="true"
      :row-selection="{
        selectedRowKeys: selectedRowKeysList,
        onChange: onSelectChange,
        preserveSelectedRowKeys: true
      }"
      :scroll="{x: 700, y: 500}"
    ></a-table>
    <Pagination
      :pageSet="pageSet"
      style="margin-top: 10px"
      :loadPagination="loadPagination"
    ></Pagination>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import {productInfoPage} from "@/api/merchandise/commodity";
import Pagination from "@/components/pagination/Pagination.vue";
import {arithmetic, ComputedReturnValue} from "@/utils/common";
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);
const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  data: {
    type: Array,
    default: []
  },
  bodyId: {
    type: Array,
    default: []
  },
  membersId: {
    type: Array,
    default: []
  }
});
const emits = defineEmits(["update:list", "update:data"]);

const selectedRowKeysList = computed({
  get() {
    return props.list;
  },
  set(value) {
    emits("update:list", value);
  }
});
const ChooseData: any = computed({
  get() {
    return props.data;
  },
  set(value) {
    value.forEach((item: any) => {
      item.num = item.num ? item.num : 1;
      item.surrogateDiscount = item.surrogateDiscount
        ? item.surrogateDiscount
        : "";
      if (item.memberPrice == item.taxPrice) {
        item.unitPrice = item.taxPrice;
        item.unitPrice1 = item.taxPrice;
      } else {
        item.unitPrice = item.memberPrice;
        item.unitPrice1 = item.taxPrice;
      }
      let heji = arithmetic(item.unitPrice, item.num, "multiply");
      if (item.surrogateDiscount) {
        heji = arithmetic(heji, item.surrogateDiscount / 100, "multiply");
      }
      item.heji = heji;
      item.productId = item.id;
    });
    emits("update:data", value);
  }
});
function onSelectChange(selectedRowKeys, data) {
  ChooseData.value = ComputedReturnValue(
    ChooseData.value,
    data,
    selectedRowKeys
  );
  selectedRowKeysList.value = selectedRowKeys;
}
const columns = ref<Array<any>>([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    align: "center",
    width: 200
  },
  {
    title: "产品编码",
    dataIndex: "productCode",
    align: "center",
    width: 140
  },
  {
    title: "规格型号",
    dataIndex: "spec",
    align: "center",
    width: 120
  },
  {
    title: "类别",
    dataIndex: "sapProductTypeName",
    align: "center",
    width: 200
  }
]);
const pageSet: any = ref({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  publishStatus: 1
});
const bodyId = computed({
  get() {
    return props.bodyId;
  },
  set() {}
});
const membersId = computed({
  get() {
    return props.membersId;
  },
  set() {}
});
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  pageSet.value.bodyId = bodyId.value;
  pageSet.value.membersId = membersId.value;
  tableLoading.value = true;
  productInfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
defineExpose({
  loadPagination
});
</script>
<style lang="less" scoped></style>
